
<script lang="ts" setup>
import { ref } from 'vue'
import TagComtent from '@/components/TagComtent.vue'
import {Histogram } from '@element-plus/icons-vue'
import { UseUserStore } from '@/stores'
import { getUserInfo } from '@/api/user'
import type { PosHis, DeptHis, User } from '@/model'
import { getDeptInfo } from '@/api/dept'
import { getPosHis } from '@/api/pos'
const userStore = UseUserStore()
const uf = ref<User>({
  empId: 0,
  username: '',
  email: '',
  headImg: '',
  sex: '',
  marry: '',
  birth: '',
  entryTime: '',
  firstJobTime: '',
  status: '',
  authorityId: 0,
  posId: 0,
  deptId: 0,
  createTime: '',
  updateTime: '',
  deptName: '',
  posName: '',
  level: 0
})

// 获取用户信息
const getUserInfoFn = async() => {
  const res = await getUserInfo(userStore.user.empId)
  uf.value = res.data
}
getUserInfoFn()
// 获取部门履历
const deptHis = ref<DeptHis[]> ([])
const getDeptFn = async () => {
  const res = await getDeptInfo(userStore.user.empId)
  deptHis.value = res.data
}
getDeptFn()

// 获取职位履历
const posHis = ref<PosHis[]>([])
const getPosHisFn = async () => {
  const res = await getPosHis(userStore.user.empId)
  posHis.value = res.data
}
getPosHisFn()
</script>

<template>
    <TagComtent />
    
    <div class="container">
         <!-- header -->
<!-- 员工信息展示 -->
 <div class="container-fluid">
    <div class="widget-title">
        <span>
            <el-icon><Histogram /></el-icon>
        </span>
        <h5>基础信息</h5>
    </div>
    <!-- 基础信息表 -->
    <div class="around-div">
        <table width="100%">
            <tr>
                <td width="15%">员工姓名:</td>
                <td width="60%">{{ uf.username }}</td>
                <td width="25%" rowspan="5">
                    <img :src="uf.headImg" width="200" height="160">
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td>{{ uf.email }}</td>
                
            </tr>
            <tr>
                <td>所属部门:</td>
                <td>{{ uf.deptName }} </td>
               
            </tr>
            <tr>
                <td>职位:</td>
                <td>{{ uf.posName }}</td>
               
            </tr>
            <tr>
                <td>性别:</td>
                <td>{{ uf.sex}}</td>
                
            </tr>
            <tr>
                <td>入职日期:</td>
                <td>{{ uf.entryTime.split('T')[0] }}</td>
                <td></td>
            </tr>
            <tr>
                <td>生日:</td>
                <td>{{ uf.birth.split('T')[0] }}</td>
                <td></td>
            </tr>
            <tr>
                <td>婚姻状态:</td>
                <td>{{ uf.marry}}</td>
                <td></td>
            </tr>
            <tr>
                <td>初次参加工作时间:</td>
                <td>{{ uf.firstJobTime.split('T')[0] }}</td>
                <td></td>
            </tr>
            
        </table>
    </div>
    <!-- 部门履历信息 -->
    <div class="around-div">
        <div class="widget-title">
        <span>
            <el-icon><Histogram /></el-icon>
        </span>
        <h5>部门履历信息</h5>
    </div>
        <div class="dept-box">
            <table width="100%">
           <thead>
            <tr>
                <th>员工姓名</th>
                <th>部门名称</th>
                <th>开始日期</th>
                <th>结束日期</th>
            </tr>
           </thead>
           <tbody>
            <tr v-for="td in deptHis">
                <td width="20%">{{ td.username }}</td>
                <td width="20%">{{ td.deptName }}</td>
                <td width="30%">{{ td.startTime.split(' ')[0] }}</td>
                <td width="30%">{{ td.endTime.split(' ')[0] }}</td>
            </tr>
           </tbody>
        </table>
        </div>
    </div>
    <!-- 职位履历信息 -->
    <div class="around-div">
        <div class="widget-title">
        <span>
            <el-icon><Histogram /></el-icon>
        </span>
        <h5>职位履历信息</h5>
    </div>
        <div class="dept-box">
            <table width="100%">
           <thead>
            <tr>
                <th>员工姓名</th>
                <th>职位名称</th>
                <th>开始日期</th>
                <th>结束日期</th>
            </tr>
           </thead>
           <tbody>
            <tr v-for="td in posHis">
                <td width="20%">{{ td.username}}</td>
                <td width="20%">{{ td.posName }}</td>
                <td width="30%">{{ td.startTime.split(' ')[0] }}</td>
                <td width="30%">{{ td.endTime.split(' ')[0] }}</td>
            </tr>
            
           </tbody>
        </table>
        </div>
    </div>
 </div>
 
    </div>
</template>

<style  scoped>
.container{
    margin: 0px;
    padding: 0px;
}
.content-header{
    display: flex;
    height:80px;
    width:100%;
    align-items: center;
    /* background-color: aqua; */
    margin-top: -25px;
}
.content-header h1{
   width: 168px;
   height:40px;
   font-size: 25px;
}

.breadcrumb{
    width: 100%;
    height:37.6px;
    background-color: rgb(229,229,229);
    display: flex;
    align-items: center;
}
.breadcrumb a{
    font-size: 15px;
    text-decoration: none;
    color: gray;
}
.breadcrumb a:hover{
    color: black;
}
.container-fluid{
    height: 451px;
    width: 100%;
    background-color: antiquewhite;
    margin-top: 30px;
}
.widget-title{
    background-color: rgb(229,229,229);
    height: 37px;
    width: 100%;
    display: flex;
    align-items: center;
}
.widget-title span{
    padding-right: 10px;
    height: 37px;
    width: 36px;
    border-right: 1px solid gainsboro;
    display: flex;
    justify-content: center;
    align-items: center;
}
.widget-title h5{
    padding-left: 10px;
}
.container-fluid table{
    border: 1px solid gainsboro;
    border-collapse: collapse;
}
.container-fluid table td{
    /* border: 1px solid gray; */
    height:43px;
}
.dept-box{
    /* border: 1px solid black; */
    height: 160px;
    width: 100%;
}
.dept-box thead{
    background-color: rgb(244,244,244);
}
.dept-box td{
    border: 1px solid gainsboro;
    text-align: center;
}
.container{
    width: 100%;
}
</style>